<template>
  <view class="y-filter">
    <img
      src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/more.png"
      style="width: 36rpx; height: 35rpx; margin-right: 30rpx"
      alt=""
      @click="openDrawer"
    />
  </view>
  <TuiDrawer mode="left" :visible="drawerVisible" @close="closeDrawer">
    <view class="d-container" :style="{ paddingTop: '56px' }">
      <view class="label">
        <template v-for="(item, index) in tabItems" :key="index">
          <view
            v-if="item.api !== undefined"
            class="label_text"
            :class="proDrawerType === item.type ? '__active' : ''"
            @click="btnDropChange(item.type, false, item.api)"
          >
            {{ item.title }}
          </view>
        </template>
      </view>
      <view class="value">
        <template v-if="proDropData && proDropData.length">
          <template v-for="(item, index) in proDropData" :key="index">
            <view
              class="value_text"
              :class="item.selected ? '__active' : ''"
              @click="btnSelected(index, item.selected)"
            >
              {{ item.name }}
            </view>
          </template>
        </template>
        <view v-else class="empty">暂无数据</view>
      </view>
      <view class="btn">
        <button class="_confirm" @click="submitFnc">确定筛选</button>
        <button class="_reset" @click="restFnc">重置</button>
      </view>
    </view>
  </TuiDrawer>
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';
  import { reactive, ref, watch } from 'vue';
  import { downList } from '@/api';

  import TuiDrawer from '@/components/TuiDrawer/index.vue';

  const props = defineProps({
    headerHeight: propTypes.number.def(0),
    zIndex: propTypes.number.def(998),
  });

  const emit = defineEmits(['submit']);
  const listParams: { [x: string]: (string | number)[] | string | number | boolean | undefined } =
    {};

  const ApplyType = () =>
    new Promise((resolve) => {
      resolve([
        { id: 1, name: '单位' },
        { id: 2, name: '个人' },
      ]);
    });

  const tabItems = ref([
    {
      title: '职务',
      type: 'memberLevel',
      api: downList,
      isDrop: true,
    },
    {
      title: '类型',
      type: 'applyType',
      api: ApplyType,
      isDrop: true,
    },

    {
      type: 'more',
    },
  ]);

  const translatey = ref(props.headerHeight + uni.upx2px(88));
  watch(
    () => props.headerHeight,
    (val) => {
      translatey.value = val + uni.upx2px(88);
    },
  );
  /** 下拉筛选控件相关 */
  interface IData {
    selected: boolean;
    name: string;
    id: number;
    dictValue: string;
  }
  const proDropList = reactive<{ [x: string]: IData[] }>({
    applyType: [],
    memberLevel: [],
  });
  const proDropData = ref<IData[]>([]);
  const dropShow = ref(false);
  const proDropType = ref('');
  const proDrawerType = ref('');
  function btnCloseDrop() {
    dropShow.value = false;
    proDropType.value = '';
  }
  function btnSelected(index: number, selected: boolean) {
    if (drawerVisible.value) {
      proDropList[proDrawerType.value][index].selected = !selected;
    } else {
      proDropList[proDropType.value][index].selected = !selected;
    }
  }
  async function btnDropChange(
    type: string,
    isDrop: boolean,
    api?: (type?: string) => Promise<any>,
  ) {
    await _getData(type, api);
    // drawerActive.value = type;
    proDropData.value = proDropList[type];
    if (isDrop) {
      dropShow.value = true;
      proDropType.value = type === proDropType.value && type === 'distance' ? '' : type;
    } else {
      proDrawerType.value = type;
    }
  }

  async function _getData(
    type: string = 'memberLevel',
    api: (type?: string) => Promise<any> = downList,
  ) {
    if (proDropList[type].length > 0) return;
    return api(type).then((r: any) => {
      console.log('r--->', r);
      let data = r;
      proDropList[type] = data.map((v: any) => {
        if (v.dictLabel) v.name = v.dictLabel;
        else if (v.userName) v.name = v.userName;
        v.selected = false;
        return v;
      });
    });
  }
  _getData();

  const drawerVisible = ref(false);
  const openDrawer = () => {
    proDrawerType.value = 'memberLevel';
    proDropData.value = proDropList['memberLevel'];
    drawerVisible.value = true;
    dropShow.value = false;
  };
  const closeDrawer = () => {
    drawerVisible.value = false;
  };

  /** 重置所有选中 */
  function restFnc() {
    for (const k in proDropList) {
      proDropList[k].forEach((v) => v.selected && (v.selected = false));
    }
    emit('submit', {});
    btnCloseDrop();
    drawerVisible.value = false;
  }

  /** 提交选中内容 */
  function submitFnc() {
    for (const k in proDropList) {
      let strArr: (string | number)[] = [];
      proDropList[k].forEach((v) => {
        if (v.selected) v.dictValue ? strArr.push(v.dictValue) : strArr.push(v.id);
      });
      let keys = strArr.length ? strArr : undefined;
      switch (k) {
        case 'applyType': // 会员类型
          listParams['applyTypeList'] = keys;
          break;
        case 'memberLevel': // 会员职务
          listParams['levelIds'] = keys;
          break;
      }
    }
    emit('submit', JSON.parse(JSON.stringify(listParams)));
    btnCloseDrop();
    drawerVisible.value = false;
  }

  defineExpose({
    restFnc,
  });
</script>

<style lang="scss" scoped>
  view {
    box-sizing: border-box;
  }

  .tui-scroll-box {
    width: 100%;
    height: 480rpx;
    // max-height: 480rpx;
    box-sizing: border-box;
    position: relative;
    // z-index: 7;
    color: #fff;
    font-size: 30rpx;
    word-break: break-all;
  }

  .tui-seizeaseat-20 {
    height: 20rpx;
  }

  .tui-drop-item {
    // color: #808080;
    // height: 40rpx;
    // line-height: 40rpx;
    // font-size: 24rpx;
    // padding: 0 17rpx;
    // box-sizing: border-box;
    // display: inline-block;
    // margin-left: 30rpx;
    // margin-bottom: 30rpx;
    // background-color: #DDDDDD;
    // border-radius: 20rpx;
    color: #333;
    height: 80rpx;
    font-size: 28rpx;
    padding: 20rpx 40rpx 20rpx 40rpx;
    box-sizing: border-box;
    display: inline-block;
    width: 50%;
  }

  .empty {
    width: 100%;
    padding: 30rpx 0;
    text-align: center;
    color: #333333;
    font-size: 28rpx;
  }

  .tui-action {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20rpx 0;
    border-top: 1rpx #dddddd solid;

    .ali-icon {
      color: #fff;
      background: #707070;
      border-radius: 50%;
      font-size: 16rpx;
      width: 20rpx;
      height: 20rpx;
      text-align: center;
      line-height: 20rpx;
      box-sizing: border-box;
      padding-left: 0rpx;
      padding-top: 0rpx;
    }

    .text {
      font-size: 23rpx;
      color: #808080;
      margin-left: 10rpx;
    }
  }

  .tui-action:active {
    background-color: #dddddd;
  }

  .tui-middle {
    vertical-align: middle;
  }

  .tui-drop-item .tui-icon-class {
    vertical-align: middle;
  }

  .tui-bold {
    font-weight: bold;
    color: #ef823a;

    .ali-icon {
      color: #ef823a;
    }
  }

  // .tui-ml {
  //   margin-left: 6rpx;
  // }

  .drop-btns {
    height: 100rpx;
    background-color: #fff;
    display: flex;
    align-items: center;

    > button {
      flex: 1;
      text-align: center;
      line-height: 100rpx;
      border-radius: 0;
    }

    .confirm-btn {
      background-color: #ef823a;
    }
  }

  .d-container {
    width: 530rpx;
    height: 100%;
    display: flex;
    align-items: flex-start;

    // box-sizing: border-box;
    .label {
      width: 200rpx;
      background-color: #fff;
      height: 100%;
      padding-top: 30rpx;
      flex-shrink: 0;
      border-right: 1rpx #f5f5f5 solid;

      &_text {
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        text-align: left;
        font-size: 28rpx;
        color: #333333;
        text-align: center;
        border-bottom: 1rpx #f5f5f5 solid;
        // box-sizing: border-box;
      }
    }

    .value {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding-top: 30rpx;
      padding-right: 20rpx;
      max-height: 70%;
      overflow: auto;

      &_text {
        min-width: 134rpx;
        padding: 20rpx 10rpx;
        text-align: center;
        font-size: 28rpx;
        color: #333333;
        margin-left: 20rpx;
        background-color: #f5f5f5;
        margin-bottom: 15rpx;
      }
    }

    .__active {
      background-color: #ece2c6;
      color: #333333;
    }

    .btn {
      position: fixed;
      bottom: 115rpx;
      right: 35rpx;

      button {
        width: 260rpx;
        height: 88rpx;
        line-height: 88rpx;
        border-radius: 10rpx;
        font-size: 28rpx;
      }

      button::after {
        border: none;
      }

      button:last-child {
        margin-top: 30rpx;
      }

      ._confirm {
        background: #ece2c7;
        color: #333333;
      }

      ._reset {
        background: #333333;
        color: #fff;
      }
    }
  }
</style>
